<template>
  <div>
    <news></news>
    <top></top>
    <div class="header container">
      <div class="header_left">
        <div class="logo">
          <img src="../assets/logo.png" alt="" />
        </div>
        <div class="sub_logo">
          <img src="../assets/subLogo.png" alt="" />
        </div>
      </div>
      <div class="search">
        <i class="el-icon-search"></i>
        <input type="text" placeholder="爱时宝" />
        <button>搜索</button>
      </div>
      <div class="qrcode">
        <img src="../assets/service_qrcode.png" alt="" />
      </div>
    </div>
    <com-nav></com-nav>
  </div>
</template>

<script>
import News from "./News.vue";
import Top from "./Top.vue";
import ComNav from "./ComNav.vue";
export default {
  components: {
    News,
    Top,
    ComNav,
  },
};
</script>

<style scoped lang="scss">
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 115px;
  .header_left {
    display: flex;
    width: 404px;
    .logo {
      width: 121px;
      height: 75px;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .sub_logo {
      width: 200px;
      height: 75px;

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
  }
  .search {
    flex: 1;
    position: relative;
    i {
      position: absolute;
      top: 50%;
      left: 5px;
      transform: translateY(-50%);
    }
    input {
      width: 284px;
      height: 34px;
      padding-left: 30px;
      margin: 0;
      border-width: 1px;
      border-color: #ccc;
      border-radius: 3px;
    }
    button {
      display: inline-block;
      width: 76px;
      height: 40px;
      cursor: pointer;
      font-size: 14px;
      color: #fff;
      border-radius: 0 4px 4px 0;
      border: 0;
      background-image: linear-gradient(-270deg, #da6666 0, #b33636 100%);
      vertical-align: middle;
    }
  }
  .qrcode {
    width: 115px;
    height: 115px;

    img {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
